<%-- 
    Document   : superintendence_form
    Created on : Apr 28, 2013, 7:28:54 PM
    Author     : fikri
--%>

<%@ include file="/WEB-INF/jsp/include/page_header.jspf" %>
<%@ taglib prefix="display" uri="http://displaytag.sf.net"%>
<%@page contentType="text/html" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>.: Observation : new report :.</title>       
        <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.blockUI.js"></script>      
        <script type="text/javascript">
            $(function() {
                $("#tabs").tabs({active: $('#tabPosition').val()});
                var frm = document.forms.form1;
                if ($('.cb').length === 0) {
                    $('.send').hide();
                }

                $('.day_left').each(function(i) {
                    i++;
                    var sts = $('#sts' +i).val();
//                    var sts2 = $('#sts2_' +i).val();
                    if (sts !== '1') {
                        var oneDay = 24 * 60 * 60 * 1000;
                        var dc = $('#day_count' + i).val();
                        var da = $('#day_add' + i).val();
                        if (isNaN(da))
                            da = 0;
                        if (isNaN(dc))
                            dc = 0;
                        var d1 = new Date();
                        var d2 = new Date($('#ds').val());
                        var diffDays = Math.round(Math.abs((d2.getTime() - d1.getTime()) / (oneDay)));
                        var availableDay = (parseInt(dc) + parseInt(da) + 1) - diffDays;

                        $("#day_left" + i).text(isNaN(availableDay) ? 0 : availableDay);
                    } else {
                        $("#day_left" + i).text('0');
                    }
                    
                    
                    if (parseInt($('#day_left' + i).text()) < 0) {
                        $(this).closest('tr').children('td,th').css('background-color', $('#severity_color' + i).val());
                    }

                });

                $("#dialog-form").dialog({
                    autoOpen: false,
                    height: 400,
                    width: 700,
                    modal: true,
                    buttons: {
                        "Save": function() {
                            if ($('#_summary').val() === '') {
                                alert('Please insert action plan.');
                                $('#_summary').focus();
                                return false;
                            }
                            $('#id').val($('#_id').val());
                            $('#summary').val($('#_summary').val());
                            frm.action = frm.action + '?saveSuperintendenceRemark';
                            frm.submit();
                        },
                        Cancel: function() {
                            $(this).dialog("close");
                        }
                    }
                });
                $("#dialog-form").next(".ui-button-text button:contains('Save')").attr("disabled", true);
            });
            
            function editTask(id) {
                $('#_id').val(id);
                $('#_summary').val('');
                $("#dialog-form").dialog("open");
            }
            function validate() {
                var send = false;
                var actionPlan = true;
                 var id;
                $('.cb').each(function() {
                    if ($(this).is(':checked')) {
                        send = true;
                        id = $(this).attr('id').substring(2);                        
                        if  ( $('#action_plan' +id).val() === ''){                                                        
                            actionPlan = false;
                            return;
                        }                        
                        return;
                    }
                });
                if (!send) {
                    alert('Please tick observation to be send');
                } else if (!actionPlan) {
                    alert ('Please insert action plan!!');
                    $('#comment' +id).focus();
                    send = false;
                } else {
                    send = confirm('Are you sure?');
                }

                return send;
            }

            function popupWin(id, val) {
                var url = val === '1' ?
                        '${pageContext.request.contextPath}/observation?viewDocumentsActionPlan&id=' + id :
                        '${pageContext.request.contextPath}/observation?viewDocsActionPlan&ids=' + id;
                var left = (screen.width / 2) - (1000 / 2);
                var top = (screen.height / 2) - (600 / 2);
                var params = 'width=1000';
                params += ', height=600';
                params += ', top=' + top;
                params += ', left=' + left;
                //params += ', fullscreen=yes';
                params += ', directories=no';
                params += ', location=no';
                params += ', menubar=no';
                params += ', resizable=no';
                params += ', scrollbars=yes';
                params += ', status=no';
                params += ', toolbar=no';
                newwin = window.open(url, 'PopUp', params);
                if (window.focus) {
                    newwin.focus();
                }
                return false;
            }
            
            function popupWinHistory(id) {
                var url = '${pageContext.request.contextPath}/observation?viewHistoryFolderDoc&ids=' + id;
                var left = (screen.width / 2) - (1000 / 2);
                var top = (screen.height / 2) - (600 / 2);
                var params = 'width=1000';
                params += ', height=600';
                params += ', top=' + top;
                params += ', left=' + left;
                //params += ', fullscreen=yes';
                params += ', directories=no';
                params += ', location=no';
                params += ', menubar=no';
                params += ', resizable=no';
                params += ', scrollbars=yes';
                params += ', status=no';
                params += ', toolbar=no';
                newwin = window.open(url, 'PopUp', params);
                if (window.focus) {
                    newwin.focus();
                }
                return false;
            }

            function popupWinObservation(id) {
                var url = '${pageContext.request.contextPath}/observation?viewDocs&ids=' + id;

                var left = (screen.width / 2) - (500 / 2);
                var top = (screen.height / 2) - (600 / 2);
                var params = 'width=500';
                params += ', height=600';
                params += ', top=' + top;
                params += ', left=' + left;
                //params += ', fullscreen=yes';
                params += ', directories=no';
                params += ', location=no';
                params += ', menubar=no';
                params += ', resizable=no';
                params += ', scrollbars=yes';
                params += ', status=no';
                params += ', toolbar=no';
                newwin = window.open(url, 'PopUp', params);
                if (window.focus) {
                    newwin.focus();
                }
                return false;
            }

            function unblockUI() {
                $.unblockUI();
            }

            function blockUI() {
                $.blockUI();
            }

        </script>
    </head>
    <body>
        <s:errors/>
        <s:messages/>
        <s:useActionBean beanclass="exatrez.stripes.util.ListUtil" var="list"/>
        <s:form beanclass="exatrez.stripes.action.ObservationAction" name="form1">
            <s:hidden name="tabPosition" id="tabPosition"/>
            <s:hidden name="observation.observationId"/>
            <s:hidden name="observation.infoAudit.createId.userId"/>
            <s:hidden name="ss" id="ds" formatPattern="MM/dd/yyyy" formatType="date" value="${actionBean.observation.dateSubmit}"/>            
            <div>

                <div id="page-title">
                    <span class="title">General</span>
                </div>   
                <table border="0" align="center" width="80%">
                    <tr>
                        <td width="13%" style="vertical-align: top; text-align: left;"><b>Vessel</b></td>
                        <td width="1%" style="vertical-align: top; text-align: left;"><b>:</b></td>
                        <td width="20%" style="vertical-align: top; text-align: left;">
                            ${actionBean.observation.vessel.vesselName}&nbsp; 
                        </td>
                        <td width="16%" style="vertical-align: top; text-align: left;">&nbsp;</td>
                        <td width="13%" style="vertical-align: top; text-align: left;"><b>Master</b></td>
                        <td width="1%" style="vertical-align: top; text-align: left;"><b>:</b></td>
                        <td width="36%" style="vertical-align: top; text-align: left;">
                            ${actionBean.observation.nameMaster}&nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td style="vertical-align: top; text-align: left;"><b>Date Of Inspection</b></td>
                        <td style="vertical-align: top; text-align: left;"><b>:</b></td>
                        <td style="vertical-align: top; text-align: left;">
                            <fmt:formatDate value="${actionBean.observation.dateOfInspection}" pattern="dd/MM/yyyy"/>
                        </td>
                        <td style="vertical-align: top; text-align: left;">&nbsp;</td>
                        <td style="vertical-align: top; text-align: left;"><b>Chief Engineer</b></td>
                        <td style="vertical-align: top; text-align: left;"><b>:</b></td>
                        <td style="vertical-align: top; text-align: left;">
                            ${actionBean.observation.nameChief}&nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td style="vertical-align: top; text-align: left;"><b>Location</b></td>
                        <td style="vertical-align: top; text-align: left;"><b>:</b></td>
                        <td style="vertical-align: top; text-align: left;">
                            ${actionBean.observation.location}&nbsp;
                        </td>
                        <td style="vertical-align: top; text-align: left;">&nbsp;</td>
                        <td style="vertical-align: top; text-align: left;"><b>Chief Officer</b></td>
                        <td style="vertical-align: top; text-align: left;"><b>:</b></td>
                        <td style="vertical-align: top; text-align: left;">
                            ${actionBean.observation.nameOfficer}&nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td style="vertical-align: top; text-align: left;">&nbsp;</td>
                        <td style="vertical-align: top; text-align: left;">&nbsp;</td>
                        <td style="vertical-align: top; text-align: left;">&nbsp;</td>
                        <td style="vertical-align: top; text-align: left;">&nbsp;</td>
                        <td style="vertical-align: top; text-align: left;"><b>2nd Engineer</b></td>
                        <td style="vertical-align: top; text-align: left;"><b>:</b></td>
                        <td style="vertical-align: top; text-align: left;">
                            ${actionBean.observation.nameEngineer}&nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td style="vertical-align: top; text-align: left;">&nbsp;</td>
                        <td style="vertical-align: top; text-align: left;">&nbsp;</td>
                        <td style="vertical-align: top; text-align: left;">&nbsp;</td>
                        <td style="vertical-align: top; text-align: left;">&nbsp;</td>
                        <td style="vertical-align: top; text-align: left;">&nbsp;</td>
                        <td style="vertical-align: top; text-align: left;">&nbsp;</td>
                        <td style="vertical-align: top; text-align: left;">&nbsp;</td>
                    </tr>
                </table>
            </div>           
            <div id="tabs">
                <div id="page-title">
                    <span style="color:red"><em>Note: Please check the tick box on the left of each Observation and click Send button to submit your comments to Marine Auditor</em></span>
                </div>  
                <ul>
                    <li><a href="#tabs-1">Executive Summary</a></li>
                    <li><a href="#tabs-2">Observation</a></li>
                    <li><a href="#tabs-3">Closing Action Plan</a></li>
                    <li><a href="#tabs-4">History Action Plan</a></li>
                </ul>
                <div id="tabs-1">               
                    <p>
                        <label style="vertical-align: top">Summary 1 :</label>
                        <s:textarea name="observation.summaryList[0].summary" rows="6" cols="80" readonly="true"/>
                    </p>
                    <p>
                        <label style="vertical-align: top">Summary 2 :</label>
                        <s:textarea name="observation.summaryList[1].summary" rows="6" cols="80" readonly="true"/>
                    </p>
                </div>
                <div id="tabs-2">
                    <p>
                        <%--<display:table class="tablecloth" name="${actionBean.observation.taskList}" requestURI="/observation?searchDraftReport" id="line">--%>
                        <display:table class="tablecloth" name="${actionBean.observation.taskList}" id="line">
                            <display:column title="OBS. ID" style="width:100px" ><center>${line.observationTaskId}</center></display:column>
                            <display:column title="Title" property="title"/>                                
                            <display:column title="Detail Of Observation" property="detail"/>
                            <display:column title="Info" property="info"/>
                            <display:column title="Photo">
                            <a href="#" onclick="popupWinObservation('${line.observationTaskId}');
                return false;">VIEW</a>
                        </display:column>                           
                    </display:table>
                    </p>                   
                </div>
                <div id="tabs-3">
                    <s:hidden name="observationTask.observationTaskId" id="id"/>
                    <s:hidden name="observationTask.summaryTemp" id="summary"/>
                    <p>
                        <%--<display:table class="tablecloth" name="${actionBean.observation.taskList}" requestURI="/observation?searchDraftReport" id="line">--%>
                        <display:table class="tablecloth" name="${actionBean.observation.taskList}" id="line">
                            <display:column>
                                <c:if test="${line.statusRemarks.statusRemarkCodeId ne '1' && line.statusSubmitSuper ne '1'}">
                                    <s:checkbox value="${line.observationTaskId}" name="cb" id="cb${line_rowNum}" class="cb"/>
                                </c:if>
                            </display:column>
                            <display:column title="OBS. ID" style="width:100px" ><center>${line.observationTaskId}</center></display:column>
                            <display:column title="TITLE" property="title"/>
                            <display:column title="DAY LEFT">                                    
                            <div class="day_left" id="day_left${line_rowNum}"></div>
                            <s:hidden name="dc" class="day_count" id="day_count${line_rowNum}" value="${empty line.severityDayCount ? 0 : line.severityDayCount}"/>
                            <s:hidden name="da" class="day_add" id="day_add${line_rowNum}" value="${empty line.severityDayAdd ? 0 : line.severityDayAdd}"/>
                            <s:hidden name="sc" class="color" id="severity_color${line_rowNum}" value="${line.severity.severityColor}"/>
                            <s:hidden name="sts" class="sts" id="sts${line_rowNum}" value="${line.statusRemarks.statusRemarkCodeId}"/>
                            <%--<s:hidden name="sts2" class="sts2" id="sts2_${line_rowNum}" value="${line.statusSubmitMa}"/>--%>
                        </display:column>    
                        <display:column title="ADDED DAYS">
                            <c:out value="${empty line.severityDayAdd ? 0 : line.severityDayAdd}"/>
                        </display:column>
                        <display:column title="SEVERITY" property="severity.severityName"/>                            
                        <display:column title="LATEST ACTION PLAN"><textarea rows="3" cols="50" readonly="true" id="action_plan${line_rowNum}">${line.summaryTemp}</textarea></display:column>
                        <display:column title="EVIDENCE PHOTO" >
                            <c:choose>
                                <c:when test="${line.statusRemarks.statusRemarkCodeId ne 1 && line.statusSubmitSuper ne '1'}">
                                    <a href="#" onclick="popupWin('${line.observationTaskId}', '1');
                return false;">Upload</a>
                                </c:when>
                                <c:otherwise>
                                    <a href="#" onclick="popupWin('${line.observationTaskId}', '2');
                return false;">VIEW</a>
                                </c:otherwise>
                            </c:choose>

                        </display:column>
                        <display:column title="REMARKS" property="statusRemarks.statusRemarkName"/> 
                        <%--<display:column title="REMARKS" property="statusRemarks.statusRemarkCodeId"/>--%> 
                        <display:column style="text-align: left" title="LATEST COMMENT" property="maRemarksTemp"/> 
                        <display:column title="ACTION">
                            <c:if test="${line.statusRemarks.statusRemarkCodeId ne 1 && line.statusSubmitSuper ne '1'}">
                                <center>                                    
                                    <a href="#" onclick="editTask('${line.observationTaskId}');
                return false;">
                                        <img src="${pageContext.request.contextPath}/images/icon/edit.png" alt="edit"/>
                                    </a>
                                </center>
                            </c:if>                            
                        </display:column>
                    </display:table>
                    </p>
                    <p align="right">
                        <s:submit name="sendToMa" value="Send" class="btn send" onclick="return validate();"/>
                    </p>
                </div>
                <div id="tabs-4">
                    <%--<display:table class="tablecloth" name="${actionBean.observation.taskList}" requestURI="/observation?searchDraftReport" id="line">--%>
                    <display:table class="tablecloth" name="${actionBean.observation.taskList}" id="line">
                        <display:column title="OBS. ID" ><center>${line.observationTaskId}</center></display:column>
                            <display:column title="Title" property="title"/>
                            <display:column title="Action Plan">
                                <%--<display:table class="tablecloth" name="${line.historyList}" requestURI="/observation?searchDraftReport" id="line2">--%>
                                <display:table class="tablecloth" name="${line.historyList}" id="line2">
                                    <display:column title="Closing Action Plan">
                                    <textarea rows="5" cols="60" readonly="true">${line2.actionPlanSummary}</textarea> <br/>
                                </display:column>
                                <display:column title="Response Date">
                                    <fmt:formatDate value="${line2.responseDate}" pattern="dd/MM/yyyy hh:mm:ss aaa"/> <br/><br/>                            
                                </display:column>
                                <display:column title="Doc. Upload">
                                    <c:choose>
                                        <c:when test="${fn:length(line2.folder.documents) > 0}">
                                            <a href="#" onclick="popupWinHistory('${line2.obsHistoryTask}');
                return false;">VIEW</a>
                                        </c:when>
                                        <c:otherwise>
                                            -<br/><br/>
                                        </c:otherwise>
                                    </c:choose>
                                </display:column>
                                <display:column title="Comment From Ma" style="width:300px">
                                    <textarea rows="5" cols="40" readonly="true">${line2.remarks}</textarea><br/>
                                </display:column>
                                <display:column title="Remarks">
                                    ${line2.statusRemarks.statusRemarkName} <br/><br/>
                                </display:column>
                            </display:table>
                        </display:column>
                        <%--<display:column title="Closing Action Plan">
                            <c:forEach items="${line.historyList}" var="summary">
                            <textarea rows="3" cols="40" readonly="true">${summary.actionPlanSummary}</textarea> <br/>
                        </c:forEach>
                    </display:column>
                    <display:column title="Response Date">
                        <c:forEach items="${line.historyList}" var="response">
                            <fmt:formatDate value="${response.responseDate}" pattern="dd/MM/yyyy hh:mm:ss aaa"/> <br/><br/>
                        </c:forEach>
                    </display:column>
                    <display:column title="Doc. Upload">
                        <c:forEach items="${line.historyList}" var="doc">
                            <c:choose>
                                <c:when test="${fn:length(doc.folder.documents) > 0}">
                                    VIEW
                                </c:when>
                                <c:otherwise>
                                  -<br/><br/>
                                </c:otherwise>
                            </c:choose>                                
                        </c:forEach>
                    </display:column>
                    <display:column title="Comment From Ma" style="width:300px">
                        <c:forEach items="${line.historyList}" var="comment">
                            <textarea rows="3" cols="40" readonly="true">${comment.remarks}</textarea><br/>
                        </c:forEach>
                    </display:column>
                    <display:column title="Remarks">
                        <c:forEach items="${line.historyList}" var="remark">
                            ${remark.statusRemarks.statusRemarkName} <br/><br/>
                        </c:forEach>
                    </display:column>--%>
                    </display:table>
                </div>
            </div>

        </s:form>
        <div id="dialog-form" title="Action Plan">
            <p class="validateTips">All form fields are required.</p>

            <s:form beanclass="exatrez.stripes.action.ObservationAction" name="form2">
                <s:hidden name="observationTask.observationTaskId" id="_id"/>
                <p>
                    <label>Action Plan :&nbsp;</label>
                    <s:textarea name="observationTask.summaryTemp" id="_summary" rows="10" cols="50"/>
                </p>                                
            </s:form>
        </div>
    </body>
</html>
